/**
 * desc:modal框展示找家纺商品信息html
 * @item {object} 商品的信息
 * @ismark {boolean} 是否展示已售罄，下架等遮罩
 * @onClick {func} 点击事件
 *
 */
import React from 'react';
import CommonZjfImg from '@/components/CommonImg/ZifComponent';
import CommonTag from '@/components/CommonTag';
import { formatAmount } from '@/utils/utils.jsx';
import { Tooltip } from 'antd';
import styles from './GoodsModal.module.less';

export default ({ item = {} }) => {
	//1是网店商品，2是系统商品
	const { goodsName, goodsId, goodsStorage, goodsImage, goodsState, storeId, isCarefullySelected, spuName, goodsNum, type = 1, vipPrice, goodsPrice, deliverType } = item;

	const price = vipPrice || goodsPrice;

	return (
		<div className={styles.goodsBox} key={item.goodsId}>
			<div className={styles.imgWrap}>
				<CommonZjfImg img={goodsImage} storeId={storeId} size="84" isCloudIcon={isCarefullySelected} isMask={true} goodsState={goodsState} goodsStorage={goodsStorage} />
			</div>
			<div className={styles.msgBox}>
				<Tooltip title={item.storeName}>
					<span className="text-overflow common-color3">
						【{type == 2 || type == 3 ? item.storeName : '系统商品'}】
					</span>
				</Tooltip>
				<Tooltip title={goodsName}>
					{
						type == 2 ?
						<a className="text-overflow common-color2" target="_blank" href={`${GOODS_HREF}${goodsId}`}>
							{goodsName}
						</a>
						:
						goodsName
					}
				</Tooltip>
				<Tooltip title={spuName}>
					<span
						className="textOverflowMultiOne"
						style={{ whiteSpace: 'pre-wrap' }}
					>
						{spuName}
					</span>
				</Tooltip>
				<Tooltip title={item.goodsSize}>
					<span className="text-overflow common-color5">
						尺码：{item.goodsSize}
					</span>
				</Tooltip>
				<Tooltip title={item.goodsColor}>
					<span className="text-overflow common-color5">
						颜色：{item.goodsColor}
					</span>
				</Tooltip>
				<span className="common-color9">
					￥{formatAmount(price)}
					<span className="common-color5" style={{ marginLeft: '12px' }}>
						x{item.goodsNum}
					</span>
				</span>
				<span className="common-color9">
					{ [1,2].includes(deliverType) && <CommonTag type="nahuo" /> }
					{ deliverType == 3 && <CommonTag type="zifa" /> }
					{ deliverType == 4 && <CommonTag type="cjzf" /> }
				</span>
			</div>
		</div>
	);
};
